import { staticRoutes } from '@/router/index'
function tranListToTreeData(list, pid) {
  const arr = []
  list.forEach((item) => {
    if (item.pid === pid) {
      // 继续调用判断是否有下一级
      const children = tranListToTreeData(list, item.id)
      if (children.length) item.children = children
      arr.push(item)
    }
  })
  return arr
}
export default {
  namespaced: true,
  state: {
    routes: staticRoutes // 开始是静态路由，最终是静态+动态 提供給侧边栏使用
  },
  mutations: {
    // 设置静态+动态结合
    setRoutes(state, data) {
      state.routes = [...staticRoutes, ...data]
    }
  },
  actions: {
    // 思路1：根据服务器端返回的权限标识和本地的完整的动态路由进行name筛选匹配找到属于用户的动态路由配置
    // 思路2：处理服务器端返回动态路由配置(整理数据，处理component) 【当前】
    generateRoute(context, data) {
      // data就是服务器端返回动态路由配置 (是否符合我们项目中路由配置的规则呢？)
      // path/component/name/hidden/meta:{title:'',icon:''}
      //   console.log(data)
      // 将服务器端返回的动态路由配置整理成项目中的结构
      let userAsyncRoute = []
      data.forEach((item) => {
        const obj = {}
        obj.path = item.path
        obj.meta = {
          title: item.title,
          icon: item.icon
        }
        obj.name = item.mark
        obj.hidden = item.is_show !== 1
        if (item.component === 'layout') {
          obj.component = require('@/views/' +
            item.component +
            '/index.vue').default
        } else {
          obj.component = require('@/views/' + item.component + '.vue').default
        }
        obj.id = item.id
        obj.pid = item.pid
        userAsyncRoute.push(obj)
      })
      // 根据ID和PID整理成上下级结构
      userAsyncRoute = tranListToTreeData(userAsyncRoute, 0)
      // console.log(userAsyncRoute) // 已经整理成项目中所需要的结构了
      // 添加* 通配404
      userAsyncRoute.push({ path: '*', redirect: '/404', hidden: true })
      // 触发mutation设置给侧边栏使用
      context.commit('setRoutes', userAsyncRoute)
      // 返回配置
      return userAsyncRoute
    }
  }
}
